<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: teal;
        }

        .comment li {
            float: left;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="js/jquery-1.12.2.js"></script>
    <script>
        $(function() {
            var wjx_none = '☆', // 空心五角星
                    wjx_sel = '★'; // 实心五角星

            // 1. 给所有的li元素绑定事件
            $(".comment").on("mouseenter", "li", function () {

                // 后面一个元素：next()
                // 后面所有的元素：nextAll();
                // 前面一个元素：prev()
                // 前面所有的元素：prevAll();
                // 2.1 让当前这个元素变为实心五角星，并且让这个元素之前的所有元素 也变为实心五角星
                $(this)
                        .text(wjx_sel)
                        .prevAll("li")
                        .text(wjx_sel)
                        .end() // 作用：恢复链式编程的上一次的状态
                        .nextAll("li")
                        .text(wjx_none);

                // 2.2 让后面所有的星星变为 空心五角星
                // $(this).nextAll("li").text(wjx_none);
            });

            // 3. 鼠标离开ul的时候绑定事件
            $(".comment").on("mouseleave", function () {
                // 3.1 给所有li 设置为 空心五角星
                $(this).children("li").text(wjx_none);

                // 3.2 给具有 类clicked 的元素设置为实心五角星，然后，让它之前的所有元素也变为实心五角星
                $(".clicked").text(wjx_sel).prevAll("li").text(wjx_sel);

                /* 这种实现方式有问题
                 // 3.3 让后面所有的星星变为 空心五角星
                 // $(".clicked").nextAll("li").text(wjx_none);*/
            });

            // 4. 给所有的li元素绑定单击事件
            $(".comment").on("click", "li", function () {
                // 4.1 单击记录下 单击了哪一个元素
                // addClass() 作用：添加类
                // 类选择
                // 4.2 给点击的元素添加类，并且让它所有的兄弟元素移除这个类
                $(this).addClass("clicked").siblings("li").removeClass("clicked");
            });
        });
    </script>
</head>
<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>
</html>
